import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';

import styles from './style.scss';

export default class Item extends Component {
    static propTypes = {
        title: PropTypes.any,
        subTitle: PropTypes.any,
        active: PropTypes.bool,
        disabled: PropTypes.bool,
        accordion: PropTypes.bool,
        onClick: PropTypes.func,
        children: PropTypes.any,
        className: PropTypes.string,
        style: PropTypes.object,
    };

    static defaultProps = {
        active: false,
        disabled: false,
        accordion: false,
    };

    onClick = evt => {
        const { disabled, onClick } = this.props;
        if (disabled) {
            return;
        }
        onClick && onClick();
    };

    render() {
        const { title, subTitle, active, disabled, className, style, children } = this.props;
        let itemCls = styles.item;
        if (className) {
            itemCls += ' ' + className;
        }
        if (active) {
            itemCls += ' active';
        }
        if (disabled) {
            itemCls += ' disabled';
        }
        return (
            <li className={itemCls} style={style}>
                <div className={styles.header} onClick={this.onClick}>
                    <div className={styles.title} style={{lineHeight: subTitle ? '1' : '36px'}}>{title}</div>
                    {
                        subTitle ?
                            <div className={styles.subTitle}>{subTitle}</div> :
                            null
                    }
                </div>
                <div className={styles.body}>{children}</div>
            </li>
        );
    }
}